<template>
  <div class="p-15 bg-f2">
    <div class="pAll bg-fff">
      <el-tabs class="noScorllFixed" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="item in psthName" :label="item.name" :name="item.path" :key="item.path">
          <router-view v-if="activeName === item.path"></router-view>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
// import { pinT } from '@/utils/allUrl.js'
import { getUrl, setUrl } from '@/utils/getUrl.js'
export default {
  data() {
    return {
      psthName: [
        { name: '通讯问题', path: 'communicationProblems' },
        { name: '设备本体问题', path: 'equipmentOntology' },
        { name: '机房动环问题', path: 'dynamicRingProblem' },
      ],
      activeName: 'communicationProblems',
    }
  },
  watch: {
    // 监听url中的hash值的变化
    $route(to, from) {
      const hashUrl = window.location.hash.substr(2)
      if (hashUrl.startsWith('communicationProblems')) {
        this.activeName = 'communicationProblems'
      } else if (hashUrl.startsWith('equipmentOntology')) {
        this.activeName = 'equipmentOntology'
      } else if (hashUrl.startsWith('dynamicRingProblem')) {
        this.activeName = 'dynamicRingProblem'
      }
    },
  },
  created() {
    // 判断本地存储中是否有地址
    const url = getUrl('ploblemsElimination')
    if (!url) {
      this.activeName = this.psthName[0].path
    } else {
      this.activeName = url
    }
    if (window.location.hash.substr(2) === 'problemKickOut') {
      this.activeName = this.psthName[0].path
      this.$router.push(`/${this.activeName}`)
    }
  },
  methods: {
    handleClick(tab, event) {
      setUrl('ploblemsElimination', tab.name)
      switch (tab.name) {
        case 'communicationProblems':
          this.$router.push('/communicationProblems')
          break
        case 'equipmentOntology':
          this.$router.push('/equipmentOntology')
          break
        case 'dynamicRingProblem':
          this.$router.push('/dynamicRingProblem')
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
